<template>
<div>
    <div class="searchCom">
        <div>
            <img src="@/assets/img/sousuo.png" alt="" style="left:16px">

            <input type="text" v-model="searchContent">
            <img src="@/assets/img/quxiao.png" alt="" style="right: 10px" @click="quxiao">
        </div>
        <button @click="search">搜索</button>
    </div>
</div>
</template>

<script>

    import request from "@/request/index.js"
    export default {
        name: "searchCom",
        components: {

        },
        data() {
            return {
                searchContent:''
            }
        },
        props:['keyWord'],
        watch:{

        },
        methods:{
            quxiao:function(){
                this.searchContent=''
            },
            search:function(){
                if(this.searchContent){
                    this.$emit('keyword',this.searchContent)
                }

            }
        },
        mounted() {
            this.searchContent=this.keyWord;
        },
    }
</script>

<style scoped lang="scss">
    .searchCom{

        padding: 0 4vw;
        >div{
            position: relative;
            height: 30px;
            width: 80vw;
            display: inline-block;
            border-radius: 100px;
            background: #f5f5f5;
            overflow: hidden;
        }
        input{
            width: 80vw;
            padding-left: 42px;
            height:100%;
            background: #f5f5f5;
        }
        img{
            width:16px;
            position: absolute;
            top: 7px;
        }
        button{
            float:right;
            background: #ffffff;
            color: #333333;
            line-height: 30px;
        }
    }
</style>
